<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="wb/css/mui.min.css">
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<title>教师详情页</title>
	<style>
		body{
			background: #f9f9f9;
		}
		.mui-pull{
			z-index: 999;
		}
	</style>
</head>
<body>
	<div class="home-header">
		<div class="home-header-area">
			<a href="">北京<i class="fa fa-sort-desc" aria-hidden="true"></i></a>
		</div>
		<div class="home-header-search">
			<div class="mui-input-row mui-search">
			    <input type="search" class="mui-input-clear" placeholder="搜索老师">
			</div>
		</div>
	</div>
	<div class="mui-content bg-mui-content">
	    <div class="mui-row mychoose-row">
	    	<div class="home-choose-box" id="home-newhot">
				<div class="home-box">
					<div class="homebox-mb">
						<ul class="homebox-ul">
							<li class="homebox-li-lighthigh"><span class="yes-span">推荐</span></li>
							<li><span>最新</span></li>
						</ul>
					</div>
				</div>
            </div>

            <div class="home-choose-box" id="home-cat">
				<div class="home-box">
					<div class="homebox-mb">
						<div class="homecat-mb">
							<p>年级</p>
							<p id="grade">
								<span class="span_lg">全部</span>
								<span>高中</span>
								<span>初中</span>
								<span>小学</span>
							</p>
						</div>
						<div class="homecat-mb">
							<p>科目</p>
							<p id="course">
								<span class="span_lg">全部</span>
								<span>英语</span>
								<span>语文</span>
								<span>数学</span>
								<span>物理</span>
								<span>化学</span>
								<span>生物</span>
								<span>政治</span>
								<span>历史</span>
								<span>地理</span>
							</p>
						</div>
						<div class="homecat-button">
							<button class="home-reset" id="home-reset">重置</button>
							<button class="home-sure" id="home-sure">确定</button>
						</div>
					</div>
				</div>
            </div>

	        <div class="mui-col-xs-6">
	            <li class="mui-table-view-cell" id="neworhot">
	                <span>推荐</span><i class="mui-icon mui-icon-arrowdown"></i>
	            </li>
	        </div>
	        <div class="mui-col-xs-6">
	            <li class="mui-table-view-cell" id="course-class">
	                <span>要求</span><i class="mui-icon mui-icon-arrowdown"></i>
	            </li>
	        </div>
	    </div>
	    <div class="home-listbox" id="homelistbox">
	    	<div class="mui-scroll" id="mui-scroll" style="position: relative;">
				
				<a href="http://www.baidu.com">
		    		<div class="homelist">
						<div class="homelist-head">
							<div class="homelist-img">
								<img src="images/head.jpg" alt="">
							</div>
							<div class="homelist-words">
								<h5>李老师<span>36岁</span></h5>
								<p><span class="fa fa-shopping-bag">10年</span><span class="fa fa-graduation-cap">博士</span><span class="fa fa-cny">100-300/小时</span></p>
								<p class="home-teacher">高中数学老师<span class="fa fa-map-marker">大屯</span></p>
							</div>
						</div>
						<div class="home-teacher-control">
							<p>该老师健康钢结构看就看鼓捣更健康健康杰哥看来的几个杰哥看来寄过来看哥看来的几个杰哥看来寄过来看就赶快就打开</p>
						</div>
					</div>
				</a>


	    	</div>
	    </div>
	</div>

	<!-- 共用底部 -->
	<div style="height: 50px;"></div>
	<div class="main_nav_bottom">
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <div class="container nav-container" align="center">
                <ul class="nav nav-tabs nav-tabs-justified">
                    <div class="row mynavs-row" align="center">
                        <div class="col-md-3 col-sm-4 col-xs-4" align="center">
                        	<li>
	                        	<a href="#" class="lighthigh">
	                        		<span class="glyphicon glyphicon-home bsnav-icon"></span>
	                        		<span class="bsnav-words">首页</span>
	                        	</a>
                        	</li>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-4" align="center">
                        	<li>
	                        	<a href="#">
	                        		<span class="glyphicon glyphicon-th bsnav-icon"></span>
	                        		<span class="bsnav-words">牛津堂</span>
	                        	</a>
                        	</li>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-4" align="center">
                        	<li>
	                        	<a href="#">
	                        		<span class="glyphicon glyphicon-user bsnav-icon"></span>
	                        		<span class="bsnav-words">我的</span>
	                        	</a>
                        	</li>
                        </div>
                    </div>
                </ul>
            </div>
        </nav>
    </div>
</body>
 
<script type="text/javascript" src="./mui/js/mui.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>

	function pulluptoRefresmui() {
		//加载下一个页面
		mui.init({
			pullRefresh: {
				container: '#homelistbox',
				up: {
					height: 50, // 可选.默认50.触发上拉加载拖动距离
					callback: pullupRefresh,
					contentrefresh: '正在刷新...',
					auto: true
				}
			}
		});
		//上拉加载回调方法
		function pullupRefresh() {
	//		if(pageNo > totalpage) {
	//			mui.toast('没有更多数据了！');
	//		}
			setTimeout(function() {
				mui('#homelistbox').pullRefresh().endPullupToRefresh();
	//			if(totalpage >= pageNo) {
					method();
	//			}
			}, 1000);
		}
	}
	function method(){
		var myStr = '<a href="http://www.baidu.com"><div class="homelist"><div class="homelist-head"><div class="homelist-img"><img src="images/head.jpg" alt=""></div><div class="homelist-words"><h5>李老师<span>36岁</span></h5><p><span class="fa fa-shopping-bag">10年</span><span class="fa fa-graduation-cap">博士</span><span class="fa fa-cny">100-300/小时</span></p><p class="home-teacher">高中数学老师<span class="fa fa-map-marker">大屯</span></p></div></div><div class="home-teacher-control"><p>该老师健康钢结构看就看鼓捣更健康健康杰哥看来的几个杰哥看来寄过来看哥看来的几个杰哥看来寄过来看就赶快就打开</p></div></div></a>';

		// var htmlStr = document.getElementById('mui-scroll').innerHTML;
		// document.getElementById('mui-scroll').innerHTML = htmlStr + myStr;
		$('.mui-scroll').append(myStr); /*仅此一句jquery*/

	}

		$('.mui-scroll').on('tap','a',function(){
			window.location.href=$(this).attr("href");
		})


	var mychildlis = document.getElementsByClassName('homebox-ul')[0].getElementsByTagName('li');
	var newhot = document.getElementById('home-newhot');
	var mycat = document.getElementById('home-cat');

	(function(){
		/*选择框*/
		var mybox = document.getElementsByClassName('home-choose-box');
		for (var i = 0; i < mybox.length; i++) {
			mybox[i].style.height = window.screen.availHeight -94+'px';
		}
		
		/*下拉刷新框*/
		document.getElementById('homelistbox').style.height = window.screen.availHeight -140+'px';	
		pulluptoRefresmui();

		/*选择框的切换*/
		var myNum1 = 0;
		var myNum2 = 0;
		document.getElementById('neworhot').addEventListener('tap',function(e){
			myNum2 = 0;
			myNum1++;
			if (myNum1 % 2 == 0) {
				mycat.style.display="none";
				newhot.style.display="none";
			}else{
				mycat.style.display="none";
				newhot.style.display="block";
			}
			
		});
		document.getElementById('course-class').addEventListener('tap',function(e){
			myNum1 = 0;
			myNum2++;
			if (myNum2 % 2 == 0) {
				mycat.style.display="none";
				newhot.style.display="none";
			}else{
				mycat.style.display="block";
				newhot.style.display="none";
			}
		});
	})();


	(function($){
		mui.init();
			/*获取最新最热的值*/
			for (var i = 0; i < mychildlis.length; i++) {
				mychildlis[i].index = i;
				mychildlis[i].addEventListener('tap',function(e){
					for (var i = 0; i < mychildlis.length; i++) {
						mychildlis[i].classList.remove("homebox-li-lighthigh"); /*移除高亮*/
						mychildlis[i].getElementsByTagName('span')[0].classList.remove("yes-span"); /*移除对勾图标*/
						mychildlis[this.index].classList.add("homebox-li-lighthigh"); /*当前高亮*/
						mychildlis[this.index].getElementsByTagName('span')[0].classList.add("yes-span"); /*当前对勾图标*/			
					}
					var str = mychildlis[this.index].getElementsByTagName('span')[0].innerText;
					console.log(str);
					newhot.style.display="none";/*选择之后隐藏*/
				});
			}


			/*选择课程/高亮函数封装*/
			function lesson(nodesId,tag,leClass){
				var les = document.getElementById(nodesId).getElementsByTagName(tag);
				for (var i = 0; i < les.length; i++) {
					les[i].index = i;
					les[i].addEventListener('tap',function(e){
						for (var i = 0; i < les.length; i++) {
							les[i].classList.remove(leClass);
							les[this.index].classList.add(leClass);
						}
					})
				}
			}

			/*获取选择的值*/
			function getText(nodesId){
				var str = document.getElementById(nodesId).getElementsByClassName('span_lg')[0].innerText;
				return str;
			}


			/*重置按钮函数封装*/
			function reSetText(nodesId){
				var nodes = document.getElementById(nodesId).getElementsByTagName('span');
				for (var i = 0; i < nodes.length; i++) {
					nodes[i].classList.remove("span_lg");
					nodes[0].classList.add("span_lg");
				}
			}

			/*方法调用/课程高亮*/
			lesson("grade","span","span_lg");
			lesson("course","span","span_lg");


			/*重置方法调用*/
			document.getElementById('home-reset').addEventListener('tap',function(){
				reSetText("grade");
				reSetText("course");
			})

			/*确定方法调用*/
			document.getElementById('home-sure').addEventListener('tap',function(){
				var mygrade = getText("grade");
				var mycourse = getText("course");
				console.log(mygrade,mycourse);
				mycat.style.display="none";
			})
			
	})(mui);
</script>
</html>
 